<template>
	<view>
		<view class="fixed">
			<view :class="{'active':isOpen}">
				<u-dropdown @open="open" @close="close">
					<u-dropdown-item v-model="value1" title="距离" :options="options1"></u-dropdown-item>
					<u-dropdown-item v-model="value2" title="温度" :options="options2"></u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		<view style="height: 300px;"></view>
		<u-radio-group v-model="value" @change="radioGroupChange">
			<u-radio 
				@change="radioChange" 
				v-for="(item2, index2) in list" :key="index2" 
				:name="item2.name"
				:disabled="item2.disabled"
			>
				{{item2.name}}
			</u-radio>
		</u-radio-group>
		
		<view style="height: 1000px;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isOpen:false,
				list: [
					{
						name: 'apple',
						disabled: false
					},
					{
						name: 'banner',
						disabled: false
					},
					{
						name: 'orange',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: 'orange',
				value1: 1,
				value2: 2,
				options1: [{
										label: '默认排序',
										value: 1,
									},
									{
										label: '距离优先',
										value: 2,
									},
									{
										label: '价格优先',
										value: 3,
									}
								],
								options2: [{
										label: '去冰',
										value: 1,
									},
									{
										label: '加冰',
										value: 2,
									},
								],
			}
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				this.value = e;
				console.log(e);
			},
			open(){
				this.isOpen = true;
				clearTimeout(this.openTime);
			},
			close(){
				this.openTime = setTimeout(()=>{
					this.isOpen =false;
				},600);
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f3f3f3;
	}
.fixed{
	position: fixed;
	width: 100%;
	left: 0;
	right: 0;
	height: auto;
	
	>view.active{
		height: 100vh;
	}
	
	/deep/ .u-dropdown {
	    background-color: #fff;
	}
}
</style>
